<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
/* border-collapse: collapse情况下，table tr td 的border只有最小级别生效，和顺序无关 */
    /* td { */
    /*   border: 1px solid orange; */
    /* } */
    tr {
      border: 1px solid yellow;
    }
    table {
      border: 1px solid red;
    }
    table,td {
      /* 设置后，效果就像excel那样 */
      border-collapse: collapse;
    }
    tr:nth-child(2n) {
      background-color: pink;
    }

    </style>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <table>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
    </table>
    <ul>
      <li>为什么写了border的tr没有效果？因为只有在border-collapse: collapse情况下，tr才有border</li>
      <li>实现border-collapse: collapse效果时，应指定给table,td，而不是只有td</li>
    </ul>
  
  </body>
</html>
